@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 47.4% 11.2%;

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 47.4% 11.2%;

        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;

        --card: 0 0% 100%;
        --card-foreground: 222.2 47.4% 11.2%;

        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 100% 50%;
        --destructive-foreground: 210 40% 98%;

        --ring: 215 20.2% 65.1%;

        --radius: 0.5rem;
    }

    .dark {
        --background: 224 71% 4%;
        --foreground: 213 31% 91%;

        --muted: 223 47% 11%;
        --muted-foreground: 215.4 16.3% 56.9%;

        --accent: 216 34% 17%;
        --accent-foreground: 210 40% 98%;

        --popover: 224 71% 4%;
        --popover-foreground: 215 20.2% 65.1%;

        --border: 216 34% 17%;
        --input: 216 34% 17%;

        --card: 224 71% 4%;
        --card-foreground: 213 31% 91%;

        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 1.2%;

        --secondary: 222.2 47.4% 11.2%;
        --secondary-foreground: 210 40% 98%;

        --destructive: 0 63% 31%;
        --destructive-foreground: 210 40% 98%;

        --ring: 216 34% 17%;

        --radius: 0.5rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
        font-feature-settings: "rlig" 1, "calt" 1;
    }
}

.prose {
    --tw-prose-headings: var(--text-default);
    --tw-prose-body: var(--text-default);
    --tw-prose-links: var(--text-default-focus);
    --tw-prose-bold: var(--text-default-focus);
}

#carbonads * {
    margin: initial;
    padding: initial;
}

#carbonads {
    display: flex;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: hsl(var(--card));
    --tw-shadow: 0 1px 2px 0 rgba(23, 1, 1, 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: 1px hsl(var(--border)) solid;
    font-size: 12px;
    font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica,
        Arial, sans-serif;
}

#carbonads a {
    background-image: none;
    color: var(--text-default);
    text-decoration: none;
}

#carbonads a:hover {
    color: hsl(var(--accent-foreground));
}

#carbonads .carbon-img {
    display: block;
    width: 100%;
    max-width: unset;
    object-fit: contain;
    /* max-width: 130px; */
    line-height: 1;
}

#carbonads .carbon-img img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    height: auto;
    margin: 0 auto;
    max-width: unset !important;
}

#carbonads .carbon-text {
    display: block;
    padding: 8px 10px;
    background-color: var(--background);
    border-top: 1px hsl(var(--border)) solid;
    line-height: 1.35;
    text-align: left;
}

#carbonads .carbon-poweredby {
    display: block;
    padding: 10px;
    border: 1px hsl(var(--border)) solid;
    background-color: hsl(var(--secondary));
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    font-weight: 600;
    font-size: 8px;
    line-height: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@media only screen and (min-width: 320px) and (max-width: 759px) {
    #carbonads {
        position: relative;
        margin: 20px 0;
        float: none;
        border: 1px white solid;
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
            var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

    #carbonads .carbon-wrap {
        display: flex;
        flex-direction: row;
    }

    #carbonads .carbon-img {
        margin: 0;
    }

    #carbonads .carbon-text {
        padding: 10px 10px 0 10px;

        font-size: 12px;
    }

    #carbonads .carbon-poweredby {
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: var(--radius);
        text-align: center;
    }
}

.responsive .react-colorful {
    width: auto;
}
